<template>
  <div class="bookshelf-container">
    <div class="sidebar">
      <category-bar @categorySelect="getNotes" ref="categoryBar"></category-bar>
    </div>

    <div class="content">
      <notes
        ref="notes"
        @editInfo="handleEditInfo"
        @addNote="handleAddNote"
        @updateInfo="getNotes"
        @editCategory="handleEditCategory">
      </notes>
      <note-edit-form ref="noteEditForm" @updateInfo="getNotes"></note-edit-form>
    </div>
  </div>
</template>

<script>
  import Notes from "./Notes";
  import CategoryBar from "./CategoryBar";
  import NoteEditForm from "./NoteEditForm";

    export default {
      name: "Bookshelf",
      components:{Notes,CategoryBar,NoteEditForm},
      data() {
        return {

        }
      },
      methods: {
        getNotes(){
          var _this = this
          var currentCid = this.$refs.categoryBar.currentCid
          this.$router.push({
            query:{
              cid:currentCid
            }
          }).catch(data => {  })
          // this.axios.get('search/categories/'+currentCid+'/notes')
          this.axios.get('note/search/category/'+this.$refs.categoryBar.currentCid)
          .then(function (response) {
            console.log(response)
            if(response.data.code === 0){
              console.log(_this.$refs.notes.showNotes)
              _this.$refs.notes.showNotes(response.data.data)
            }
          })
        },

        handleEditInfo(noteInfo){
          this.$refs.noteEditForm.dialogFormVisible = true
          this.$refs.noteEditForm.isCreate = false
          this.$refs.noteEditForm.form = noteInfo
        },

        handleAddNote(){
          var currentCid = this.$refs.categoryBar.currentCid
          this.$refs.noteEditForm.dialogFormVisible = true
          this.$refs.noteEditForm.isCreate = true
          this.$refs.noteEditForm.form = {}
          this.$refs.noteEditForm.cid = this.$refs.categoryBar.currentCid
        },

        handleEditCategory(){
          this.$refs.categoryBar.edit()
        },





      }

    }
</script>

<style>
  .el-tabs__item {
    height: 20px!important;
    line-height: 20px!important;
    font-size: 12px;
  }


  .el-tabs__item.is-active {
    font-weight: bolder!important;
  }

  .bookshelf-container {
    display: flex; /* 使用flex布局 */
    height: 100vh; /* 让容器铺满整个视口高度 */
  }

  .sidebar {
    width: 250px; /* 侧边栏宽度 */
    height: 100%; /* 侧边栏高度填满 */
    border-right: 1px solid #ebeef5; /* 添加分割线 */
    //overflow-y: auto; /* 超出时滚动 */
    background-color: #f5f5f5; /* 可选背景色 */
  }

  .content {
    flex: 1; /* 主内容区域占据剩余空间 */
    padding: 20px; /* 内容区域内边距 */
    overflow-y: auto; /* 内容过多时滚动 */
  }

</style>
